<template>
    <el-scrollbar height="610px">
        <!-- form 查询表单 -->
        <el-form :model="order" ref="formRef" label-width="auto" label-position="right" style="padding-bottom: 10px;">
            <el-row :gutter="20">
                <el-col :span="5">
                    <el-form-item label="订单编号" prop="dingdan_num">
                        <el-input v-model="order.dingdan_num" placeholder="请输入订单编号" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="用户ID" prop="user_id">
                        <el-input v-model="order.user_id" placeholder="请输入用户ID" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="状态" prop="state">
                        <el-select v-model="order.state" placeholder="状态" clearable>
                            <!--
                            * 订单状态
                            * 0：待接单
                            * 1：商家未接单
                            * 2：商家已接单
                            * 3：骑手已接单
                            * 4：配送中
                            * 5：订单完成
                            -->
                            <el-option label="全部" value="" />
                            <el-option label="待接单" value="0" />
                            <el-option label="商家未接单" value="1" />
                            <el-option label="商家已接单" value="2" />
                            <el-option label="骑手已接单" value="3" />
                            <el-option label="配送中" value="4" />
                            <el-option label="已完成" value="5" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="doList">查询</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- table 表格 -->
        <el-table :data="tableData" stripe style="width: 100%" height="650px">
            <el-table-column type="index" lable="序号" width="80"/>
            <el-table-column prop="dingdan_num" label="订单编号"/>
            <el-table-column prop="shop_name" label="商家名称" />
            <el-table-column prop="rider_name" label="配送员名字" />
            <el-table-column prop="price" label="金额" />

            <el-table-column prop="state" label="订单状态" >
                <template #default="scope">
                    <el-tag v-if="scope.row.state === '0'" type="warning">待商家接单</el-tag>
                    <el-tag v-else-if="scope.row.state === '1'" type="danger">商家已拒绝</el-tag>
                    <el-tag v-else-if="scope.row.state === '2'" type="success">商家已接单，待骑手接单</el-tag>
                    <el-tag v-else-if="scope.row.state === '3'" type="success">骑手已接单</el-tag>
                    <el-tag v-else-if="scope.row.state === '4'" type="success">配送中</el-tag>
                    <el-tag v-else-if="scope.row.state === '5'" type="success">已完成</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button type="primary" @click="showDetailPage(scope.row)">订单详细</el-button>
                    <el-tag v-if="scope.row.state === '5'" type="primary">
                        <el-button v-if="scope.row.hasAppraised" type="success" disabled>已评价</el-button>
                        <el-button v-else type="primary" @click="appraise(scope.row)">订单评价</el-button>
                    </el-tag>

                    <el-button v-else type="info" @click="appraise(scope.row)" disabled>订单评价</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 详情 页面 -->
        <Detail ref="detailPageRef" size="40%"></Detail>

        <!-- 评价 dialog-->
        <el-dialog v-model="appraiseVisible" title="评价" width="40%" top="2vh" destroy-on-close>
            <order-appraise ref="orderAppraiseRef"
                            @flushPage="doList"
                            @closeDialog="appraiseVisible = false">
            </order-appraise>
        </el-dialog>
    </el-scrollbar>
</template>

<script setup lang="ts">
import {ref,nextTick,onMounted} from "vue";
import {FormInstance} from "element-plus";
import axios from "axios";
import Detail from "./Detail.vue";
import OrderAppraise from "./OrderAppraise.vue";
import router from "../../../router.ts";


const order=ref({
    id:'',//id
    dingdan_num: '',//订单编号
    user_id: '',//用户编号
    shop_id: '',//店铺编号
    rider_id: '',//骑手编号
    address_id: '',//地址编号
    state: '',//订单状态
    money: '',//金额
    remark: '',//订单备注
    time: '',//下单时间
    end_time: '',//配送完成时间
    gratuity: '',//配送费
    hasAppraised: false,//是否被评价
});

//--------------------------获取用户信息-----------------------
const user=ref({});
const acquireUsers=async ()=>{
    const {data} = await axios.get('/api/user1',{params:user.value});
    if(data.length==0)
        router.push('/login');
    user.value=data;
    order.value.user_id=user.value.id;
    doList();   // 查询数据
}

const tableData=ref([]);
//---------------------- 查询 ------------------------------
const doList=async ()=>{
    const {data} = await axios.get('/api/dingdan/nopage',{params:order.value});
    tableData.value = data.reverse();
    // 为每个订单查询评价状态
    for (let orderItem of tableData.value) {
        const {data}= await axios.get('/api/score/'+orderItem.dingdan_num);
        console.log(data);
        if (data.length!=0){
            orderItem.hasAppraised = true;
        }
    }
};



const formatState = (state: string) => {
    alert("状态："+state)
    switch (state) {
        case '0': return '待接单'
        case '1': return '商家未接单'
        case '2': return '商家已接单'
        case '3': return '骑手已接单'
        case '4': return '配送中'
        case '5': return '已完成'
        default: return '未知状态'
    }
}

// ---------------------------------订单评价--------------------------

const appraiseVisible = ref(false);
const orderAppraiseRef = ref(); // 组件引用
const appraise = (obj)=>{
    appraiseVisible.value = true;
    nextTick(()=>{
        orderAppraiseRef.value.handleUpdateData(obj);
    })
}


//--------------------------- 详显 页面---------------------------
// 详显组件引用 -> 绑定到
const detailPageRef = ref();
const showDetailPage = (obj)=>{
    detailPageRef.value.handleDetailData(obj);
}

const pingjia=ref()
//查询评价
const queryPingjia=async ()=>{
    const {data} = await axios.get('/api/pingjia',{params:order.value.dingdan_num});
}




// 初始化
onMounted(()=>{
    acquireUsers();

})
</script>

<style scoped>

</style>